<template>
    <ex-dialog
      width="800px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
      append-to-body
    >
      <div class="main" v-loading="loading">
        <template>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm" :disabled="pathType=='watch'?true:false">
            <el-form-item label="直播结果：" prop="liveStatus">
                <el-select v-model="ruleForm.liveStatus" filterable placeholder="请选择" :style="{width: inputWidth}">
                    <el-option v-for="item in resultOption" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            <template v-if="ruleForm.liveStatus=='1'">
              <el-form-item label="直播日期：" prop="liveDay">
                <el-date-picker v-model="ruleForm.liveDay" type="date" placeholder="选择日期" :disabled="true" :style="{width: inputWidth}"></el-date-picker>
              </el-form-item>
              <!-- <el-form-item label="直播间名称：" prop="liveName">
                <el-input v-model="ruleForm.liveName" placeholder="请输入" :style="{width: inputWidth}" maxlength="50" show-word-limit></el-input>
              </el-form-item> -->
              <el-form-item label="开播时间：" prop="liveStartTime">
                <el-time-picker v-model="ruleForm.liveStartTime" placeholder="请选择" value-format="HH:mm" format="HH:mm" :style="{width: inputWidth}"></el-time-picker>
              </el-form-item>
              <el-form-item label="直播时长：" prop="" required>
                <el-row :gutter="1">
                  <el-col :span="6">
                    <el-form-item label="" prop="liveHour">
                      <el-input v-model="ruleForm.liveHour" placeholder="请输入" style="width: 130px;"><template slot="append">时</template></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="" prop="liveMinute">
                      <el-input v-model="ruleForm.liveMinute" placeholder="请输入" style="width: 130px;"><template slot="append">分</template></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="" prop="liveSecond">
                      <el-input v-model="ruleForm.liveSecond" placeholder="请输入" style="width: 130px;"><template slot="append">秒</template></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="直播场次详情：" required>
                <div v-for="(item,tIndex) in ruleForm.liveResultList" :key="tIndex">
                  <span style="color: #1890FF">{{item.liveRoomName + ' 第' + item.sessionNo + '场（' + item.startTime + '-' + item.endTime + '）'}}</span>
                  <div v-for="(nav,uIndex) in item.liveUserResultList" :key="uIndex">
                    <div style="margin-bottom: 20px">
                      <el-row :gutter="1">
                        <el-col :span="6">
                          <span>{{nav.userName}}({{nav.roleType=='1'?'主播':'中控'}})：</span>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="" :prop="`liveResultList[${tIndex}].liveUserResultList[${uIndex}].liveHour`" :rules="rules.liveHour" key="222">
                            <el-input v-model="nav.liveHour" placeholder="请输入" style="width: 130px;"><template slot="append">时</template></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="" :prop="`liveResultList[${tIndex}].liveUserResultList[${uIndex}].liveMinute`" :rules="rules.liveMinute">
                            <el-input v-model="nav.liveMinute" placeholder="请输入" style="width: 130px;"><template slot="append">分</template></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="直播渠道：" prop="liveChannelType">
                <el-select v-model="ruleForm.liveChannelType" filterable placeholder="请选择" :style="{width: inputWidth}">
                    <el-option v-for="item in liveChannelTypeOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="直播预约人数：" prop="liveAppointmentNumber">
                <el-input v-model="ruleForm.liveAppointmentNumber" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">人</template></el-input>
              </el-form-item>
              <el-form-item label="宣传投流成本：" prop="flowCost">
                <el-input v-model="ruleForm.flowCost" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">元</template></el-input>
              </el-form-item>
              <el-form-item label="直播间曝光人数：（投流/公域流量曝光人数）" prop="liveExposureNumber">
                <el-input v-model="ruleForm.liveExposureNumber" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">人</template></el-input>
              </el-form-item>
              <el-form-item label="直播间观看人数：" prop="liveWatchNumber">
                <el-input v-model="ruleForm.liveWatchNumber" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">人</template></el-input>
              </el-form-item>
              <el-form-item label="商品曝光人数：" prop="goodsExposureNumber">
                <el-input v-model="ruleForm.goodsExposureNumber" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">人</template></el-input>
              </el-form-item>
              <el-form-item label="商品点击人数：" prop="goodsClickNumber">
                <el-input v-model="ruleForm.goodsClickNumber" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">人</template></el-input>
              </el-form-item>
              <!-- <el-form-item label="直播时段注册人数：" prop="liveRegisterNumber">
                <el-input v-model="ruleForm.liveRegisterNumber" placeholder="请输入" :style="{width: inputWidth}" :disabled="true"><template slot="append">人</template></el-input>
              </el-form-item> -->
              <el-form-item label="订单成交数：" prop="orderNumber">
                <el-input v-model="ruleForm.orderNumber" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">单</template></el-input>
              </el-form-item>
              <el-form-item label="成交人数：" prop="orderPeopleNumber">
                <el-input v-model="ruleForm.orderPeopleNumber" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">人</template></el-input>
              </el-form-item>
              <el-form-item label="销售额：" prop="orderSellMoney">
                <el-input v-model="ruleForm.orderSellMoney" placeholder="请输入" :style="{width: inputWidth}"><template slot="append">元</template></el-input>
              </el-form-item>
            </template>
            <el-form-item label="未完成原因：" prop="remark" v-if="ruleForm.liveStatus=='2'" key="20">
              <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入" maxlength="500" show-word-limit :style="{width: inputWidth}" :autosize="{ minRows: 4, maxRows: 6}"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </div>
      <div class="button_box" v-if="pathType!='watch'">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">保存提交</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    liveDetail,recordUpdateLive
  } from "@/api/customer/serviceManage";
  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
    },
    data() {
      var checkLiveHour = (rule, value, callback) => {
        var reg = /^[0-9]\d*$/
        if (value === '') {
          console.log(111)
          callback(new Error('请输入时'));
        } else if (!reg.test(value)) {
          console.log(222)
          callback(new Error('请输入0-999的整数'));
        }else if (value>999) {
          console.log(333)
          callback(new Error('请输入0-999的整数'));
        }else {
          console.log(444)
          callback();
        }
      };
      var checkLiveMinute = (rule, value, callback) => {
        var reg = /^([0-5]?[0-9]|59)$/
        if (value === '') {
          callback(new Error('请输入分'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入0-59的整数'));
        }  else {
          callback();
        }
      };
      var checkLiveSecond = (rule, value, callback) => {
        var reg = /^([0-5]?[0-9]|59)$/
        if (value === '') {
          callback(new Error('请输入秒'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入0-59的整数'));
        }  else {
          callback();
        }
      };
      var checkNum = (rule, value, callback) => {
        var reg = /^[0-9]\d*$/
        if (value === '') {
          callback(new Error('请输入'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入大于等于0的整数'));
        }else if (value > 99999999) {
          callback(new Error('请输入小于100000000的整数'));
        }else {
          callback();
        }
      };
      var checkTwoNum = (rule, value, callback) => {
        let regNumber = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于等于0的数值且最多保留两位小数的数值
        if (regNumber.test(value) == false) {
          return callback(new Error('请填写大于等于0且最多保留两位小数的数值'));
        } else if (value >= 100000000) {
          callback(new Error('请输入小于100000000的数值'));
        } else {
          return callback()
        }
      };
      return {
        labelWidth: "150px",
        inputWidth: "430px",
        title: "直播结果",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        ruleForm: {
          flowCost:'',//宣传投流成本
          goodsClickNumber:'',//商品点击人数
          goodsExposureNumber:'',//商品曝光人数
          id:'',//直播数据id
          itemLinkRecordId:'',//客户服务环节记录id
          liveAppointmentNumber:'',//直播预约人数
          liveChannelType:'',//直播渠道类型 1 抖音 2 美团 3微信视频号
          liveExposureNumber:'',//直播曝光人数
          liveHour:'',//直播时长（时）
          liveMinute:'',//直播时长（分）
          liveName:'',//直播间名称
          liveRegisterNumber: 0,//直播时段注册人数
          liveSecond:'',//直播时长（秒）
          liveStartTime:'',//开播时间
          liveStatus:'',//直播结果（1 直播完成 2 未完成直播）
          liveWatchNumber:'',//直播观看人数
          orderNumber:'',//订单成交数
          orderPeopleNumber:'',//订单成交人数
          orderSellMoney:'',//订单销售额
          remark:'',//备注（未完成原因）
          serviceItemRecordId:'',//服务项目记录id
          liveDay:'',//直播日期
          liveResultList:[ //直播结果信息集合
            {
              startTime:'',//直播开始时间
              endTime:'',//直播结束时间
              sessionNo:'',//场次号
              liveUserResultList:[
                {
                  liveHour:'',//直播时长（时）
                  liveMinute:'',//直播时长（分）
                  roleType:'',//角色类型 1 主播 2 中控
                  userId:'',//用户id
                  userName:'',//用户名称
                }
              ]
            }
          ],
        },
        rules: {
          liveStatus: [
            { required: true,message: "请选择直播结果",trigger: ["change", "bulr"]}
          ],
          liveDay: [
            { required: true,message: "请选择直播日期",trigger: ["change", "bulr"]}
          ],
          liveName: [
            { required: true,message: "请输入直播间名称",trigger: ["change", "bulr"]}
          ],
          liveStartTime: [
            { required: true,message: "请选择开播时间",trigger: ["change", "bulr"]}
          ],
          liveHour: [
            { required: true,validator: checkLiveHour,trigger: ["change", "bulr"]}
          ],
          liveMinute: [
            { required: true,validator: checkLiveMinute,trigger: ["change", "bulr"]}
          ],
          liveSecond: [
            { required: true,validator: checkLiveSecond,trigger: ["change", "bulr"]}
          ],
          liveChannelType: [
            { required: true,message: "请选择直播渠道",trigger: ["change", "bulr"]}
          ],
          liveAppointmentNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          flowCost: [
            { required: true,validator: checkTwoNum,trigger: ["change", "bulr"]}
          ],
          liveExposureNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          liveWatchNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          goodsExposureNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          goodsClickNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          liveRegisterNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          orderNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          orderPeopleNumber: [
            { required: true,validator: checkNum,trigger: ["change", "bulr"]}
          ],
          orderSellMoney: [
            { required: true,validator: checkTwoNum,trigger: ["change", "bulr"]}
          ],
          remark: [
            { required: true,message: "请输入未完成原因",trigger: ["change", "bulr"]}
          ],
        },
        resultOption:[{id:'1',value:'直播完成'},{id:'2',value:'未完成直播'}],//直播结果下拉
        liveChannelTypeOptions:[{id:'1',value:'抖音'},{id:'2',value:'美团'},{id:'3',value:'微信视频号'}],//直播渠道类型下拉数组
      };
    },
    computed: {},
    created() {
      console.log(this.pathType)
      this.getLiveDetail()
    },
    mounted() {
     
    },
    computed: {},
    methods: {
      //获取详情
      getLiveDetail(){
        liveDetail(this.id).then(res => {
          this.ruleForm = res.result
        })
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate(valid => {
          console.log('this.ruleForm',this.ruleForm)
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            recordUpdateLive(data).then(res => {
                this.handleClose()
                this.$message.success('操作成功')
                this.$emit('success',true)
                this.AgreeLoading = false
              }).catch(()=>{
                this.AgreeLoading = false
              })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select,.el-input,.el-cascader{
    width: 400px;
  }
  .main {
    padding: 20px 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
  }
  .el-radio-group{
    display: flex;
    flex-direction: column;
    .el-radio{
      margin-bottom: 14px;
    }
  }
  .form_item{
    display: flex;
  }
  .form_item_label{
    margin-left: 18px;
    color: #606266;
    font-size: 14px;
    font-weight: bold;
  }
  .form_item_detail{
    margin-left: 10px;
  }
  </style>
  